<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮变色</title>
		<style type="text/css">
			button {
				margin:20px;
				width:100px;
				height:50px;
			}
		</style>
	</head>
	<body>
		<button onclick="bg(this,'pink')">变粉</button>
		<button onclick="bg(this,'yellow')">变黄</button>
		<button onclick="bg(this,'blue')">变蓝</button>
		<script type="text/javascript">
//			<!--需求：点击按钮，该按钮的背景色变成提示的颜色-->
//			<!--方法1：匿名函数+点击事件-->重复代码多
//			var btn = document.getElementsByTagName("button");
//			console.log(btn);
//			btn[0].onclick =function(){
//				btn[0].style.background = "pink";
//			}
//			btn[1].onclick =function(){
//				btn[1].style.background = "yellow";
//			}
//			btn[2].onclick =function(){
//				btn[2].style.background = "blue";
//			}
			 //方法2：for循环 this当前节点 只能实现变同一个颜色
//			 var arrCl=["pink","yellow","blue"];
//			 for(var i=0; i<btn.length;i++){
//			 	btn[i].onclick = function(){
//			 		this.style.background = "red";
//			 	}
//			 }
			 //方法三：传参
			 function bg(jie,col){
			 	jie.style.background = col;
			 }
			 
		</script>
	</body>
</html>
